<!--打赏歌手-->
<template>
  <sub-page>
    <main-card>
      <my-table style="height: auto" class="mytable">
        <el-table :data="tableData" style="width: 100%" header-row-class-name="table-header">
          <el-table-column type="index" label="编号" width="80" align="center" header-align="center" />
          <el-table-column label="用户信息" min-width="150" header-align="center">
            <template slot-scope="scope">
              <el-tooltip placement="top">
                <div slot="content">
                  桌号：{{ getParsedC02(scope.row).desknum || '-' }}<br />
                  祝福语：{{ getParsedC02(scope.row).content || '-' }}
                </div>
                <div class="uploadImg">
                  <img width="22" height="22" :src="scope.row.avator" />
                  <span class="text">{{ scope.row.wx_name }}</span>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="歌手信息" min-width="150" align="center" header-align="center">
            <template slot-scope="scope">
              <div class="singer-info">
                <img v-if="getParsedSingerInfo(scope.row).avator" width="22" height="22" :src="getParsedSingerInfo(scope.row).avator" />
                <span class="text">{{ getParsedSingerInfo(scope.row).name || '-' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="gift_price" label="金额" min-width="100" align="center" header-align="center" />
          <el-table-column prop="gift_income" label="收益" min-width="100" align="center" header-align="center" />
          <el-table-column label="时间" min-width="160" align="center" header-align="center">
            <template slot-scope="scope">
              {{ new Date(scope.row.create_time) | formatDate }}
            </template>
          </el-table-column>
        </el-table>
      </my-table>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import MyTable from '@/components/myTable';
import { getTipSingerList } from '@/api/setting/activityIncome/activityIncomeData';
import { formatDate } from '@/utils/format';

export default {
  name: 'tipSinger',
  components: { SubPage, MainCard, MyTable },
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList() {
      const params = {
        splid: this.$store.state.liveId,
        currentPage: '1',
        showCount: '10',
        singerId: '',
      };
      console.log('发送打赏歌手API请求,参数:', params);
      getTipSingerList(params)
        .then((res) => {
          console.log('打赏歌手API响应:', res);
          console.log('响应数据:', res.data);
          console.log('列表数据:', res.data.list);
          console.log('汇总信息:', res.data.info);
          // 暂不处理数据,等后端字段确定
          this.tableData = res.data.list || [];
        })
        .catch((err) => {
          console.error('打赏歌手API错误:', err);
        });
    },
    // 用于获取解析后的用户信息
    getParsedC02(row) {
      return this.parseC02(row.c02) || {}; // 返回一个空对象以避免后续错误
    },

    // 用于获取解析后的歌手信息
    getParsedSingerInfo(row) {
      return this.parseSingerInfo(row.singerInfo) || {}; // 返回一个空对象
    },
    // 解析c02 JSON字符串
    parseC02(c02Str) {
      try {
        if (!c02Str) return null;
        const parsed = JSON.parse(c02Str);
        // 对URL编码的内容进行解码
        if (parsed.content) {
          parsed.content = decodeURIComponent(parsed.content);
        }
        if (parsed.singername) {
          parsed.singername = decodeURIComponent(parsed.singername);
        }
        if (parsed.desknum) {
          parsed.desknum = decodeURIComponent(parsed.desknum);
        }
        return parsed;
      } catch (error) {
        console.error('解析c02失败:', error);
        return null;
      }
    },
    // 解析singerInfo JSON字符串
    parseSingerInfo(singerInfoStr) {
      try {
        if (!singerInfoStr) return null;
        const parsed = JSON.parse(singerInfoStr);
        // 对URL编码的内容进行解码
        if (parsed.name) {
          parsed.name = decodeURIComponent(parsed.name);
        }
        return parsed;
      } catch (error) {
        console.error('解析singerInfo失败:', error);
        return null;
      }
    },
  },
  filters: {
    formatDate(time) {
      return formatDate(time, 'yyyy/MM/dd hh:mm:ss');
    },
  },
};
</script>

<style lang="less" scoped>
.mytable {
  .uploadImg {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
  .singer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
